import { CouponOutline } from 'antd-mobile-icons'
import React from 'react'

const Info = () => {
  // 接收ID参数
  let [searchParams] = React.Router.useSearchParams()
  let [cid, SetID] = React.useState(searchParams.get('cid') ? searchParams.get('cid') : 0)
  let [receive, SetReceive] = React.useState([])
  let [coupon, SetCoupon] = React.useState({
    title: '',
    rate: 1,
    total: 0,
    createtime_text: '',
    endtime_text: '',
    thumb_text: '',
    receive: true,
  })

  React.useEffect(() => {
    CouponRequest() //请求优惠卷信息
  }, [])

  // 请求优惠卷信息
  const CouponRequest = async () => {
    // 组装数据
    var data = {
      cid,
      busid: React.Business.id
    }

    var result = await React.HTTP.post('/coupon/info', data)

    if (result.code == 0) {
      React.error(result.msg)
      return false
    }

    SetCoupon(result.data.coupon)
    SetReceive(result.data.receive)
  }

  // 领取优惠卷
  const CouponReceive = async () => {
    //弹框
    var result = await React.UI.Dialog.confirm({
      content: '是否确认领取优惠券'
    })

    if (!result) return false

    if (Object.getOwnPropertyNames(React.Business).length <= 0) {
      React.error('请先登录', () => { })
      return false
    }

    //组装数据
    var data = {
      cid,
      busid: React.Business.id
    }

    var result = await React.HTTP.post('/coupon/receive', data)

    if (result.code == 0) {
      React.error(result.msg, () => { })
      return false
    } else {
      CouponRequest()
      React.success(result.msg, () => { })
    }
  }

  const SwiperView = () => {
    if (receive.length <= 0) {
      return (<></>)
    }

    return (
      <React.UI.Swiper
        autoplay={true}
        autoplayInterval={3000}
        loop={true}
        indicator={() => false}
        direction='vertical'
        style={{ '--height': '40px', 'border': '0px' }}
      >
        {SwiperItem}
      </React.UI.Swiper>
    )
  }

  const SwiperItem = receive.map((item: any, key: number) =>
    <React.UI.Swiper.Item key={key}>
      <React.UI.NoticeBar
        style={{ 'border': '0px' }}
        content={`用户：${item.business.nickname ? item.business.nickname : '匿名用户'} 在 ${item.createtime_text} 领取了优惠券`}
        color='info'
      />
    </React.UI.Swiper.Item>
  )

  return (
    <>
      <link rel='stylesheet' href="/assets/css/coupon-info.css" />

      <React.UI.AutoCenter>
        <React.UI.Image src={coupon.thumb_text} width={'100%'} fit='fill' />
      </React.UI.AutoCenter>

      {/* 领取列表 */}
      <SwiperView />

      {/* 优惠券 */}
      <div className='coupon_detail'>
        <div className='coupon_info'>
          <div className="left">
            <div className="left_top">
              <div>
                <span>{coupon.rate * 10}</span>折
              </div>
              <div className="top_info">
                <div>优惠券</div>
                <div>COUPON</div>
              </div>
            </div>
          </div>
          <div className="receive">
            {
              coupon.receive ?
                <React.UI.Button size="small" disabled color='primary'>您已领取</React.UI.Button> :
                <React.UI.Button size="small" onClick={CouponReceive} color='primary'>领取</React.UI.Button>
            }
          </div>
        </div>
        <div className="coupon_prompt">
          <div className="prompt_title">温馨提示：</div>
          <div>
            <span>•</span>
            领取后 {coupon.createtime_text} 至 {coupon.endtime_text} 有效
          </div>
          <div><span>•</span>仅限量{coupon.total}张，赶快领取！</div>
        </div>
      </div>
    </>
  )

}

export default Info
